<!doctype html>
<html class="export">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Cascading grid layout library">

  <title>Masonry &#xB7; Appendix</title>

    <link rel="stylesheet" href="css/masonry-docs.css" media="screen">

</head>
<body class="page--appendix" data-page="appendix">

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--appendix">
          <a href="appendix.html">Appendix</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>


  <div id="content" class="content container">

      <h1>Appendix</h1>

    <ul class="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#web-fonts">Web fonts</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#typekit">Typekit</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#requirejs">RequireJS</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#browserify">Browserify</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#component-libraries">Component libraries</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#docready">docReady</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#classie">classie</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#eventie">eventie</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#animating-item-size">Animating item size</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#issues">Issues</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#reduced-test-cases">Reduced test cases</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#submitting-issues">Submitting issues</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#extra-examples">Extra examples</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#upgrading-from-v2">Upgrading from v2</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#additional-resources">Additional resources</a></li>
</ul>



<h2 id="web-fonts">Web fonts</h2>

<p>Like images, unloaded web fonts can throw off Masonry. To resolve this, trigger <a href="methods.html#layout"><code>layout</code></a> after fonts have been loaded. Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded.</p>

<ul>
  <li><a href="http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/">Typekit font events</a></li>
  <li><a href="https://developers.google.com/webfonts/docs/webfont_loader#Events">Google WebFont Loader: Events</a></li>
</ul>

<h3 id="typekit">Typekit</h3>

<p>Try the script below when using Masonry on a page with Typekit. This will trigger Masonry when the document is ready and again when fonts have loaded. Be sure to remove Typekit&#x2019;s default script, <code>try{Typekit.load();}catch(e){}</code>.</p>

<pre><code class="js"><span class="keyword">var</span> <span class="masonry_var">msnry</span>;

<span class="function"><span class="keyword">function</span> <span class="title">triggerMasonry</span><span class="params">()</span> </span>{
  <span class="comment">// don&apos;t proceed if masonry has not been initialized</span>
  <span class="keyword">if</span> ( !<span class="masonry_var">msnry</span> ) {
    <span class="keyword">return</span>;
  }
  <span class="masonry_var">msnry</span>.layout();
}
<span class="comment">// initialize masonry on document ready</span>
docReady( <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="keyword">var</span> container = <span class="built_in">document</span>.querySelector(<span class="string">&apos;.grid&apos;</span>);
  <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( container, {
    <span class="comment">// options...</span>
  });
});
<span class="comment">// trigger masonry when fonts have loaded</span>
Typekit.load({
  active: triggerMasonry,
  inactive: triggerMasonry
});
</code></pre>

<pre><code class="js"><span class="comment">// or with jQuery</span>
<span class="keyword">var</span> <span class="jquery_var">$grid</span>;

<span class="function"><span class="keyword">function</span> <span class="title">triggerMasonry</span><span class="params">()</span> </span>{
  <span class="comment">// don&apos;t proceed if $grid has not been selected</span>
  <span class="keyword">if</span> ( !<span class="jquery_var">$grid</span> ) {
    <span class="keyword">return</span>;
  }
  <span class="comment">// init Masonry</span>
  <span class="jquery_var">$grid</span>.masonry({
    <span class="comment">// options...</span>
  });
}
<span class="comment">// trigger masonry on document ready</span>
$(<span class="function"><span class="keyword">function</span><span class="params">()</span></span>{
  <span class="jquery_var">$grid</span> = $(<span class="string">&apos;.grid&apos;</span>);
  triggerMasonry();
});
<span class="comment">// trigger masonry when fonts have loaded</span>
Typekit.load({
  active: triggerMasonry,
  inactive: triggerMasonry
});
</code></pre>


<h2 id="requirejs">RequireJS</h2>

<p>Masonry supports <a href="http://requirejs.org">RequireJS</a>.</p>

<p>You can require <a href="masonry.pkgd.js">masonry.pkgd.js</a>.</p>

<pre><code class="js">requirejs( [
  <span class="string">&apos;path/to/masonry.pkgd.js&apos;</span>,
], <span class="function"><span class="keyword">function</span><span class="params">( Masonry )</span> </span>{
  <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( <span class="string">&apos;.grid&apos;</span>, {...});
});
</code></pre>

<p id="requirejs-pkgd-jquery">To use Masonry as a jQuery plugin with RequireJS and masonry.pkgd.js, you need to use jQuery Bridget.</p>


<pre><code class="js"><span class="comment">// require the require function</span>
requirejs( [ <span class="string">&apos;require&apos;</span>, <span class="string">&apos;jquery&apos;</span>, <span class="string">&apos;path/to/masonry.pkgd.js&apos;</span> ],
  <span class="function"><span class="keyword">function</span><span class="params">( require, $, Masonry )</span> </span>{
    <span class="comment">// require jquery-bridget, it&apos;s included in masonry.pkgd.js</span>
    <span class="built_in">require</span>( [ <span class="string">&apos;jquery-bridget/jquery.bridget&apos;</span> ],
    <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
      <span class="comment">// make Masonry a jQuery plugin</span>
      $.bridget( <span class="string">&apos;masonry&apos;</span>, <span class="masonry_keyword">Masonry</span> );
      <span class="comment">// now you can use $().masonry()</span>
      $(<span class="string">&apos;.grid&apos;</span>).masonry({...});
    }
  );
});
</code></pre>

<p id="requirejs-bower">Or, you can manage dependencies with <a href="http://bower.io">Bower</a>. Set <a href="http://requirejs.org/docs/api.html#config-baseUrl">baseUrl</a> to <code>bower_components</code> and set a path config for all your application code.</p>

<pre><code class="js">requirejs.config({
  baseUrl: <span class="string">&apos;bower_components/&apos;</span>,
  paths: {
    app: <span class="string">&apos;../&apos;</span>
  }
});

requirejs( [
  <span class="string">&apos;masonry/masonry&apos;</span>,
  <span class="string">&apos;app/my-component.js&apos;</span>
], <span class="function"><span class="keyword">function</span><span class="params">( Masonry, myComp )</span> </span>{
  <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( <span class="string">&apos;.grid&apos;</span>, {...});
});
</code></pre>

<p id="requirejs-bower-jquery">You can require Bower dependencies and use Masonry as a jQuery plugin with jQuery Bridget.</p>

<pre><code class="js">requirejs.config({
  baseUrl: <span class="string">&apos;../bower_components&apos;</span>,
  paths: {
    jquery: <span class="string">&apos;jquery/jquery&apos;</span>
  }
});

requirejs( [
    <span class="string">&apos;jquery&apos;</span>,
    <span class="string">&apos;masonry/masonry&apos;</span>,
    <span class="string">&apos;jquery-bridget/jquery.bridget&apos;</span>
  ],
  <span class="function"><span class="keyword">function</span><span class="params">( $, Masonry )</span> </span>{
    <span class="comment">// make Masonry a jQuery plugin</span>
    $.bridget( <span class="string">&apos;masonry&apos;</span>, <span class="masonry_keyword">Masonry</span> );
    <span class="comment">// now you can use $().masonry()</span>
    $(<span class="string">&apos;.grid&apos;</span>).masonry({...});
});
</code></pre>


<h2 id="browserify">Browserify</h2>

<p>Masonry works with <a href="http://browserify.org">Browserify</a>. <a href="https://www.npmjs.org/package/masonry-layout">Install Masonry with npm</a>.</p>

<pre><code>npm install masonry-layout
</code></pre>

<pre><code class="js"><span class="keyword">var</span> <span class="masonry_keyword">Masonry</span> = <span class="built_in">require</span>(<span class="string">&apos;masonry-layout&apos;</span>);

<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( <span class="string">&apos;.grid&apos;</span>, {
  <span class="comment">// options...</span>
});
</code></pre>

<p id="browserify-jquery">To use Masonry as a jQuery plugin with Browserify, you need to use <a href="https://www.npmjs.org/package/jquery-bridget">jQuery Bridget</a></p>

<pre><code>npm install jquery
npm install jquery-bridget
</code></pre>

<pre><code class="js"><span class="keyword">var</span> $ = <span class="built_in">require</span>(<span class="string">&apos;jquery&apos;</span>);
<span class="keyword">var</span> jQBridget = <span class="built_in">require</span>(<span class="string">&apos;jquery-bridget&apos;</span>);
<span class="keyword">var</span> <span class="masonry_keyword">Masonry</span> = <span class="built_in">require</span>(<span class="string">&apos;masonry-layout&apos;</span>);
<span class="comment">// make Masonry a jQuery plugin</span>
$.bridget( <span class="string">&apos;masonry&apos;</span>, <span class="masonry_keyword">Masonry</span> );
<span class="comment">// now you can use $().masonry()</span>
$(<span class="string">&apos;.grid&apos;</span>).masonry({
  columnWidth: <span class="number">80</span>
});
</code></pre>


<h2 id="component-libraries">Component libraries</h2>

<p>Masonry includes several component libraries. You might have seen these used in the example code. You can use some of these libraries in your own code.</p>

<h3 id="docready">docReady</h3>

<p><a href="https://github.com/desandro/doc-ready">docReady triggers initialization logic when the document is ready,</a> just like jQuery&apos;s <code>$(document).ready()</code>. <code>docReady</code> is used to initialize all the demos in these docs.</p>

<pre><code class="js">docReady( <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="comment">// document is ready, let&apos;s do some fun stuff!</span>
  <span class="keyword">var</span> container = <span class="built_in">document</span>.querySelector(<span class="string">&apos;.grid&apos;</span>);
  <span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( container );
});
</code></pre>

<h3 id="classie">classie</h3>

<p><a href="https://github.com/desandro/classie">classie has class helper functions.</a> classie is not included with Masonry.</p>

<pre><code class="js">classie.has( element, <span class="string">&apos;my-class&apos;</span> ) <span class="comment">// returns true/false</span>
classie.add( element, <span class="string">&apos;my-new-class&apos;</span> ) <span class="comment">// add new class</span>
classie.remove( element, <span class="string">&apos;my-unwanted-class&apos;</span> ) <span class="comment">// remove class</span>
classie.toggle( element, <span class="string">&apos;my-class&apos;</span> ) <span class="comment">// toggle class</span>
</code></pre>

<h3 id="eventie">eventie</h3>

<p><a href="https://github.com/desandro/eventie">Eventie makes event binding in IE8 legit.</a></p>

<pre><code class="js"><span class="keyword">var</span> elem = <span class="built_in">document</span>.querySelector(<span class="string">&apos;#my-elem&apos;</span>);
<span class="function"><span class="keyword">function</span> <span class="title">onElemClick</span><span class="params">( event )</span> </span>{
  <span class="built_in">console</span>.log( event.type + <span class="string">&apos; just happened on #&apos;</span> + event.target.id );
  <span class="comment">// -&gt; click just happened on #my-elem</span>
}
<span class="comment">// bind it</span>
eventie.bind( elem, <span class="string">&apos;click&apos;</span>, onElemClick );
<span class="comment">// unbind it</span>
eventie.unbind( elem, <span class="string">&apos;click&apos;</span>, onElemClick );
</code></pre>


<h2 id="animating-item-size">Animating item size</h2>

<p>You cannot transition or animate the size of an item element <em>and</em> properly lay out. But there is a trick &#x2014; you can animate a child element of the item element.</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="html"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid&quot;</span>&gt;</span>
  <span class="comment">&lt;!-- items have grid-item-content child elements --&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item&quot;</span>&gt;</span>
    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item-content&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  ...
</code></pre>

<pre><code class="css"><span class="comment">/* item is invisible, but used for layout
item-content is visible, and transitions size */</span>
<span class="class">.grid-item</span>,
<span class="class">.grid-item-content</span> <span class="rules">{
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">60px</span></span></span>;
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">60px</span></span></span>;
}</span>
<span class="class">.grid-item-content</span> <span class="rules">{
  <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#09D</span></span></span>;
  <span class="rule"><span class="attribute">transition</span>:<span class="value"> width <span class="number">0.4s</span>, height <span class="number">0.4s</span></span></span>;
}</span>

<span class="comment">/* both item and item content change size */</span>
<span class="class">.grid-item</span><span class="class">.is-expanded</span>,
<span class="class">.grid-item</span><span class="class">.is-expanded</span> <span class="class">.grid-item-content</span> <span class="rules">{
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">180px</span></span></span>;
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">120px</span></span></span>;
}</span>
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js-module="animate-item-size">
    <p class="instruction">Click to item to toggle size</p>
    <div class="grid">
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
    </div>
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/daKBo">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/ILbJy">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>

<p>This technique works on items with responsive, percentage widths. Although, it does require a bit more JS. <a href="http://codepen.io/desandro/pen/jGJKL">Check out the example on CodePen</a> to see how it&#x2019;s done.</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="css"><span class="class">.grid-item</span> <span class="rules">{
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">20%</span></span></span>;
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">60px</span></span></span>;
}</span>

<span class="class">.grid-item-content</span> <span class="rules">{
  <span class="rule"><span class="attribute">width</span>:<span class="value">  <span class="number">100%</span></span></span>;
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100%</span></span></span>;
  <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#09D</span></span></span>;
  <span class="rule"><span class="attribute">transition</span>:<span class="value"> width <span class="number">0.4s</span>, height <span class="number">0.4s</span></span></span>;
}</span>
<span class="comment">/* item has expanded size */</span>
<span class="class">.grid-item</span><span class="class">.is-expanded</span> <span class="rules">{
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">60%</span></span></span>;
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">120px</span></span></span>;
}</span>
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js-module="animate-item-size-responsive">
    <p class="instruction">Click to item to toggle size</p>
    <div class="grid grid--animate-item-size-responsive">
      <div class="grid-sizer"></div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
      <div class="animate-item-size-item">
        <div class="animate-item-size-item__content"></div>
      </div>
    </div>
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/JFpIB">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/BnCqy">vanilla JS demo</a> on CodePen
      </p>
  </div>

</div>


<h2 id="issues">Issues</h2>

<h3 id="reduced-test-cases">Reduced test cases</h3>

<p>Creating a reduced test case is the best way to debug problems and report issues. Read <a href="http://css-tricks.com/reduced-test-cases/">CSS Tricks</a> on why they&#x2019;re so great.</p>

<p>Create a reduced test case for Masonry by forking any one of the <a href="http://codepen.io/desandro/tag/masonry-docs">CodePen demos</a> from these docs.</p>

<ul>
  <li>A reduced test case clearly demonstrates the bug or issue.</li>
  <li>It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug.</li>
  <li>A link to your production site is <b>not</b> a reduced test case.</li>
</ul>

<p>Creating a reduced test case is the best way to get your issue addressed. They help you point out the problem. They help us debug the problem. They help others understand the problem.</p>


<h3 id="submitting-issues">Submitting issues</h3>

<p>Report <a href="https://github.com/desandro/masonry/issues/">issues on GitHub</a>. Make sure to include a <strong>reduced test case</strong>. Without a reduced test case, your issue may be closed.</p>


<h2 id="extra-examples">Extra examples</h2>

<ul>
  <li><a href="http://codepen.io/desandro/pen/kwsJb">Iteratively reveal items after each image is loaded</a>. See <a href="https://github.com/desandro/masonry/issues/501#issuecomment-34583942">explanation on issue #501</a></li>
  <li><a href="http://codepen.io/desandro/pen/btHyq">Drag and drop in and out of Masonry</a> (sort of)</li>
</ul>



<h2 id="upgrading-from-v2">Upgrading from v2</h2>

<ul>
  <li>smartresize jQuery plugin has been removed</li>
  <li><a href="http://desandro.github.io/imagesloaded/">imagesLoaded</a> no longer included, but is still recommended.</li>
  <li>jQuery animation has been removed. <code>animationOptions</code> has been removed. This means no animation for in IE8 and IE9.</li>
  <li>Corner stamp is now integrated as <a href="options.html#stamp"><code>stamp</code> option</a> and <a href="methods.html#stamp"><code>stamp</code> method</a></li>
  <li><code>isRTL</code> option removed, use <a href="options.html#isoriginleft"><code>isOriginLeft: false</code></a> instead</li>
  <li><code>isResizable</code> option renamed to <a href="options.html#isresizebound"><code>isResizeBound</code></a></li>
  <li><code>layout</code> method renamed to <a href="methods.html#layoutitems"><code>layoutItems</code></a></li>
  <li><code>gutterWidth</code> option renamed to <a href="options.html#gutter"><code>gutter</code></a></li>
</ul>


<h2 id="additional-resources">Additional resources</h2>

<ul>
  <li><a href="http://codepen.io/desandro/tag/masonry/">Masonry CodePens</a></li>
  <li>The <a href="http://metafizzy.co/blog/">Metafizzy blog</a> has posts that cover specialized use cases</li>
  <li><a href="http://stackoverflow.com/users/182183/desandro?tab=answers">My answers on Stack Overflow</a></li>
  <li><a href="http://www.delicious.com/desandro/jquerymasonry">Sites using Masonry on Delicious</a></li>
  <li><a href="http://stackoverflow.com/search?q=masonry">Stack Overflow questions about Masonry</a></li>
  <li><a href="http://www.delicious.com/desandro/re:masonry">Related Masonry links</a></li>
  <li>Other resources that are <a href="http://www.delicious.com/desandro/likemasonrybutnot">like Masonry but not</a></li>
</ul>


  </div>

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--appendix">
          <a href="appendix.html">Appendix</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  <div class="site-footer">
  
    <div class="container">
        <p class="site-footer__copy">
          Masonry is made by <a href="http://desandro.com">David DeSandro</a>.
          Make something rad with it.
        </p>
  
  
      <p class="site-footer__copy">Help improve these docs.
        <a href="https://github.com/desandro/masonry-docs/issues/">Open an issue</a> or
        <a href="https://github.com/desandro/masonry-docs/blob/master/content/appendix.mustache">pull request</a>.</p>
  
    </div>
  
  </div>

<!-- Masonry does NOT require jQuery.
     jQuery is only used to demonstrate Masonry as a jQuery plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')</script>

  <script src="js/masonry-docs.min.js"></script>


</body>
</html>
